<!DOCTYPE html>
<html>
	<head>
		<title>售后申请单列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- 参数栏 -->
				<div class="c-title">检索参数</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">申请单编号：</label>
						<el-input size="mini" v-model="p.apply_bn" placeholder="模糊查询" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">客户名称：</label>
						<el-input size="mini" v-model="p.nickname" placeholder="模糊查询" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">订单编号：</label>
						<el-input size="mini" v-model="p.order_bn" placeholder="模糊查询" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">申请单状态：</label>
						<el-select size="mini" v-model="p.state">
							<el-option label="全部" value=""></el-option>
							<el-option label="待审核" value="WAIT_AUDIT"></el-option>
							<el-option label="审核通过" value="APPROVED"></el-option>
							<el-option label="审核拒绝" value="REFUSED"></el-option>
						</el-select>
					</div>
					<div class="c-item">
						<label class="c-label">申请日期：</label>
						<el-date-picker size="mini" v-model="p.start_at" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker size="mini" v-model="p.end_at" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</div>
					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="p.page = 1; f5()">查询</el-button>
					</div>
				</el-form>
				<!-- 数据列表 -->
				<el-table stripe class="data-table" ref="data-table" :data="dataList" size="small">
					<el-table-column label="ID" prop="apply_id" width="50"></el-table-column>
					<el-table-column label="申请编号" prop="apply_bn" width="150"></el-table-column>
					<el-table-column label="客户名称" prop="customer_name"></el-table-column>
					<el-table-column label="状态" prop="state_name"></el-table-column>
					<el-table-column label="订单编号" prop="order_bn"></el-table-column>
					<el-table-column label="商品数量" prop="total_qty"></el-table-column>
					<el-table-column label="金额" prop="total_amount"></el-table-column>
					<el-table-column label="申请日期">
						<template slot-scope="s">
							{{sa.forDate(s.row.created_at, 2)}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="220px" fixed="right">
						<template slot-scope="s">
							<el-button v-if="s.row.actions.filter(function (e) { return e == 'aftersales-list::audit'; }).length != 0"type="text" size="mini" @click="audit(s.row)">审核</el-button>
							<el-button v-if="s.row.actions.filter(function (e) { return e == 'aftersales-list::view'; }).length != 0"type="text" size="mini" @click="view(s.row)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--  分页  -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.page" 
						:page-size.sync="p.page_size" 
						:total="total" 
						:page-sizes="[20]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, 	// 超级对象
					p: {	// 查询参数 
						nickname: '',
						apply_bn: '',
						nickname: '',
						state: '',
						start_at: '',
						end_at: '',
						page: 1,
						page_size: 20
					},
					dataList: [],	// 数据集合
					total: 0,
				},
				methods: {
					// 刷新
					f5: function(){
						sa.ajax(router.getApplyList, this.p, function(res){
							this.dataList = res.list;	// 数据
							this.total = res.total;
							sa.f5TableHeight();		// 刷新表格高度 
						}.bind(this), {type:'get'});
					},
					// 去审核
					audit: function (data) {
						sa.showIframe('申请审核', 'audit.html?id=' + data.apply_id, '500px', '400px');
					},
					// 删除
					del: function (data) {
						sa.confirm('是否删除，此操作不可撤销', function(){
							sa.ajax(router.deleteOrder,{order_id: data.order_id},function(res){
								sa.arrayDelete(app.dataList, data);
								sa.ok('删除成功');
								sa.f5TableHeight(); // 刷新表格高度 
							});
						});
					},
					// 查看
					view: function (data) {
						sa_admin.showTab({id:90004, name: "订单详情", url: "view/sales/order-detail.html?id=" + data.order_id});
					},
				},
				created: function(){
					// 初始化数据
					this.f5();
					sa.onInputEnter(); // 监听输入框的回车事件，执行查询
				}
			});
		</script>
	</body>
</html>